import Link from "next/link";
import { ArrowRight, Search } from "lucide-react";
import { getLocale } from "@/lib/i18n/server";
import { fmtDate, href, t } from "@/lib/i18n";
import { domainsWithCounts, graph, listPapers, stats } from "@/lib/papers/queries";
import { PaperCard, PaperRow } from "@/components/paper-items";
import { StatTiles } from "@/components/stat-tiles";
import { Constellation, type GEdge, type GNode } from "@/components/constellation";
export const revalidate = 300;

export default async function Home() {
  const locale = await getLocale(); const d = t(locale);
  const [s, featured, latest, domains, g] = await Promise.all([stats(), listPapers({ featured: true, sort: "recent", perPage: 4 }), listPapers({ sort: "revised", perPage: 6 }), domainsWithCounts(), graph(["topic", "method", "dataset", "author", "semantic", "curated"])]);
  const featuredItems = [...featured.items].sort((a, b) => (a.featured_rank ?? 99) - (b.featured_rank ?? 99));
  return (
    <>
      <section className="border-b border-line bg-bg-2/60">
        <div className="container py-14 sm:py-20 grid gap-8 lg:grid-cols-[1.4fr_1fr] items-end">
          <div>
            <p className="kicker mb-3">{d.site.secondary} · {d.site.affiliation}</p>
            <h1 className="text-4xl sm:text-5xl leading-[1.08] text-fg">{d.home.heroTitle}</h1>
            <p className="mt-5 text-lg text-fg-2 max-w-2xl leading-relaxed">{d.home.heroLead}</p>
            <form action={href(locale, "/search")} method="get" role="search" className="mt-7 flex gap-2 max-w-2xl">
              <label htmlFor="home-q" className="sr-only">{d.nav.search}</label>
              <input id="home-q" name="q" className="input" placeholder={d.home.searchPlaceholder} autoComplete="off" />
              <button type="submit" className="btn btn-primary shrink-0"><Search size={16} aria-hidden /> <span className="hidden sm:inline">{d.search.go}</span></button>
            </form>
            <div className="mt-5 flex flex-wrap gap-2">
              <Link href={href(locale, "/papers")} className="btn btn-primary no-underline">{d.home.explore} <ArrowRight size={16} aria-hidden /></Link>
              <Link href={href(locale, "/topics")} className="btn no-underline">{d.home.browseTopics}</Link>
            </div>
          </div>
          <div className="text-sm text-fg-3 lg:text-right"><p className="serif text-fg text-lg italic">{d.site.tagline}</p></div>
        </div>
      </section>

      <section className="container py-12">
        <div className="flex items-end justify-between gap-4 mb-5"><div><h2 className="text-2xl">{d.home.stats}</h2><p className="meta mt-1">{d.home.statsLead}</p></div></div>
        <StatTiles s={s} locale={locale} />
      </section>

      {featuredItems.length > 0 && (
        <section className="container py-6">
          <div className="flex items-end justify-between gap-4 mb-5"><div><h2 className="text-2xl">{d.home.featured}</h2><p className="meta mt-1">{d.home.featuredLead}</p></div><Link href={href(locale, "/papers")} className="text-sm text-navy no-underline hover:underline whitespace-nowrap">{d.home.viewAll} →</Link></div>
          <div className="grid gap-4 md:grid-cols-2">{featuredItems.map((p) => <PaperCard key={p.id} p={p} locale={locale} />)}</div>
        </section>
      )}

      <section className="container py-10 grid gap-10 lg:grid-cols-[1.5fr_1fr]">
        <div>
          <div className="flex items-end justify-between gap-4 mb-2"><div><h2 className="text-2xl">{d.home.latest}</h2><p className="meta mt-1">{d.home.latestLead}</p></div><Link href={href(locale, "/papers?sort=revised")} className="text-sm text-navy no-underline hover:underline whitespace-nowrap">{d.home.viewAll} →</Link></div>
          <div className="card px-5">{latest.items.map((p) => <PaperRow key={p.id} p={p} locale={locale} compact />)}</div>
        </div>
        <div>
          <h2 className="text-2xl">{d.home.domains}</h2><p className="meta mt-1 mb-4">{d.home.domainsLead}</p>
          <ul className="grid gap-2">
            {domains.map((dm) => <li key={dm.slug}><Link href={href(locale, `/topics/${dm.slug}`)} className="card px-4 py-3 flex items-center gap-3 no-underline hover:shadow-[var(--shadow-lift)] transition-shadow"><span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: dm.accent ?? "var(--navy)" }} /><span className="flex-1 text-fg">{locale === "fr" ? dm.name_fr : dm.name_en}</span><span className="text-xs text-fg-3 font-mono">{dm.n}</span></Link></li>)}
          </ul>
        </div>
      </section>

      <section className="container py-10">
        <div className="flex items-end justify-between gap-4 mb-5"><div><h2 className="text-2xl">{d.home.constellation}</h2><p className="meta mt-1 max-w-3xl">{d.home.constellationLead}</p></div><Link href={href(locale, "/research-map")} className="text-sm text-navy no-underline hover:underline whitespace-nowrap">{d.home.openMap} →</Link></div>
        <Constellation locale={locale} nodes={g.nodes as unknown as GNode[]} edges={g.edges as unknown as GEdge[]} compact />
      </section>
      <p className="container text-xs text-fg-3 pb-4">{d.stats.latest}: {s.latest ? fmtDate(locale, s.latest, "month") : "—"}</p>
    </>
  );
}